<template>
  <div class="hello">
    <h1>分享</h1>
    <div class="img_box">
      <a
        v-on:mouseover="changeActive($event)"
        v-on:mouseout="removeActive($event)"
        class="img_box_bg imgurl"
        href="https://blog.csdn.net/qq_40922656"
      >
        <div class="mengceng"></div>
      </a>
      <a class="img_box_bg imgurl1" href="https://gitee.com/mengxianwei1231">
        <div class="mengceng"></div>
      </a>
      <a class="img_box_bg imgurl2" href="http://blog.sina.com.cn/u/6814230582">
        <div class="mengceng"></div>
      </a>
      <a class="img_box_bg imgurl3" href="https://weread.qq.com/web/shelf">
        <div class="mengceng"></div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    changeActive($event) {
      $event.currentTarget.className = "img_box_bg imgurl active";
    },
    removeActive($event) {
      $event.currentTarget.className = "img_box_bg imgurl";
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
// 移动
@media screen and (max-width: 799px) {
  .hello {
    margin-top: 10vh;
  }
  h1 {
    font-size: 20px;
    font-weight: 700;
  }
  .img_box {
    opacity: 1;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 40%;
    margin: auto;
    .imgurl {
      background: green url("../assets/csdn.jpeg") no-repeat center center
        scroll;
    }
    .imgurl1 {
      background: green url("../assets/git.jpeg") no-repeat center center scroll;
    }
    .imgurl2 {
      background: green url("../assets/blog.jpg") no-repeat center center scroll;
    }
    .imgurl3 {
      background: green url("../assets/book.jpeg") no-repeat center center
        scroll;
    }

    .img_box_bg {
      width: 20%;
      height: 20%;
      padding: 58px 86px;
      margin: auto;
      margin-top: 20px;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;

      border: 8px solid #f6f6f6;
      　box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);

      .active {
        background: black;
        width: 100%;
        height: 100%;
        opacity: 0.4;
      }
      .active {
        .mengceng {
          //蒙层
          h3 {
            text-align: center;
            margin-top: 25%;
          }
          position: absolute;
          background: rgba(101, 101, 101, 0.6);
          color: #ffffff;
          opacity: 0;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          border-radius: 10px;
          pointer-events: none;

          background: black;
          width: 100%;
          height: 100%;
          // opacity: 0.4;
          -webkit-mask: -webkit-linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4)
          );
        }
      }
    }
    margin-bottom: 20vh;
  }
}

//pc
@media screen and (min-width: 800px) {
  h1 {
    margin-top: 10vh;
  }
  .img_box {
    opacity: 1;

    display: flex;
    flex-wrap: wrap;
    width: 50%;
    margin: auto;
    .imgurl {
      background: green url("../assets/csdn.jpeg") no-repeat center center
        scroll;
    }
    .imgurl1 {
      background: green url("../assets/git.jpeg") no-repeat center center scroll;
    }
    .imgurl2 {
      background: green url("../assets/blog.jpg") no-repeat center center scroll;
    }
    .imgurl3 {
      background: green url("../assets/book.jpeg") no-repeat center center
        scroll;
    }

    .img_box_bg {
      width: 20%;
      height: 30%;
      padding: 90px;
      margin: auto;
      margin-top: 50px;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;

      border: 8px solid #f6f6f6;
      　box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);

      .active {
        background: black;
        width: 100%;
        height: 100%;
        opacity: 0.4;
      }
      .active {
        .mengceng {
          //蒙层
          h3 {
            text-align: center;
            margin-top: 25%;
          }
          position: absolute;
          background: rgba(101, 101, 101, 0.6);
          color: #ffffff;
          opacity: 0;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          border-radius: 10px;
          pointer-events: none;

          background: black;
          width: 100%;
          height: 100%;
          // opacity: 0.4;
          -webkit-mask: -webkit-linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4)
          );
        }
      }
    }
    margin-bottom: 20vh;
  }
}
</style>
